
<script setup >
import { onMounted, ref } from "vue";

    const  resourceTop5 = ref([
        {
          brand:"语文",
          amount: 100012,
          rate: 80,
          isDown: true 
        },
        {
          brand:"数学",
          amount: 600012,
            rate: 90,
          isDown: true 
        },
        {
          brand:"英语",
          amount: 870012,
            rate: 60,
          isDown: false 
        },
        {
          brand:"历史",
          amount: 600012,
            rate: 50,
          isDown: true 
        },
        {
          brand:"地理",
          amount: 87912,
            rate: 86,
          isDown: false 
        },
      ])

      const activeindex = ref(0)

     let timerId = null
    //   定义自动高亮

    const  getColorRandom  = () =>{
    timerId =  setInterval(()=>{
        activeindex.value++

        if(activeindex.value == resourceTop5.value.length) {
            activeindex.value = 0
        }
      },116000)
    }



    onMounted(()=>{
        var w  , option 
        getColorRandom()
        // 定义字体大小
        function placeholderPic() {
          console.log(`output->w`,w)
          w = document.documentElement.clientWidth / 80;
          document.documentElement.style.fontSize = w + "px";
        
        }
        placeholderPic();
    
      
    
        // 中间背景雨
        function rainBg() {
          var c = document.querySelector(".rain");
          var ctx = c.getContext("2d"); //获取canvas上下文
          var w = (c.width = document.querySelector(".total").clientWidth);
          var h = (c.height = document.querySelector(".total").clientHeight);
          //设置canvas宽、高
    
          function random(min, max) {
            return Math.random() * (max - min) + min;
          }
    
          function RainDrop() {}
          //雨滴对象 这是绘制雨滴动画的关键
          RainDrop.prototype = {
            init: function () {
              this.x = random(0, w); //雨滴的位置x
              this.y = h; //雨滴的位置y
              this.color = "hsl(180, 100%, 50%)"; //雨滴颜色 长方形的填充色
              this.vy = random(4, 5); //雨滴下落速度
              this.hit = 0; //下落的最大值
              this.size = 2; //长方形宽度
            },
            draw: function () {
              if (this.y > this.hit) {
                var linearGradient = ctx.createLinearGradient(
                  this.x,
                  this.y,
                  this.x,
                  this.y + this.size * 30
                );
                // 设置起始颜色
                linearGradient.addColorStop(0, "#14789c");
                // 设置终止颜色
                linearGradient.addColorStop(1, "#090723");
                // 设置填充样式
                ctx.fillStyle = linearGradient;
                ctx.fillRect(this.x, this.y, this.size, this.size * 50); //绘制长方形，通过多次叠加长方形，形成雨滴下落效果
              }
              this.update(); //更新位置
            },
            update: function () {
              if (this.y > this.hit) {
                this.y -= this.vy; //未达到底部，增加雨滴y坐标
              } else {
                this.init();
              }
            },
          };
    
          function resize() {
            w = c.width = window.innerWidth;
            h = c.height = window.innerHeight;
          }
    
          //初始化一个雨滴
    
          var rs = [];
          for (var i = 0; i < 10; i++) {
            setTimeout(function () {
              var r = new RainDrop();
              r.init();
              rs.push(r);
            }, i * 300);
          }
    
          function anim() {
            ctx.clearRect(0, 0, w, h); //填充背景色，注意不要用clearRect，否则会清空前面的雨滴，导致不能产生叠加的效果
            for (var i = 0; i < rs.length; i++) {
              rs[i].draw(); //绘制雨滴
            }
            requestAnimationFrame(anim); //控制动画帧
          }
    
          window.addEventListener("resize", resize);
          //启动动画
          anim();
        }
        rainBg();
    
        // 中间虚线
        function dashed() {
          var canvas = document.querySelector(".dashed");
          var ctx = canvas.getContext("2d");
          var w = (canvas.width = document.querySelector(".total").clientWidth);
          var h = (canvas.height =
            (document.querySelector(".total").clientHeight / 3) * 2);
          ctx.lineWidth = 3;
          ctx.setLineDash([3, 3]);
          ctx.fillStyle = "#93f8fb";
          ctx.shadowOffsetX = 0;
          // 阴影的y偏移
          ctx.shadowOffsetY = 0;
          // 阴影颜色
          ctx.shadowColor = "#93f8fb";
          // 阴影的模糊半径
          ctx.shadowBlur = 15;
          ctx.save(); //缓存初始状态
          // 绘制第一条曲线
          ctx.beginPath();
          var grd = ctx.createLinearGradient((w / 11) * 2, h / 3, (w / 5) * 2, h);
          grd.addColorStop(0, "#54e2e6");
          grd.addColorStop(1, "#065261");
          ctx.strokeStyle = grd;
          ctx.moveTo((w / 5) * 2, h);
          ctx.quadraticCurveTo(w / 5, (h / 6) * 5, (w / 11) * 2, h / 3);
          ctx.stroke();
          // 绘制第一条曲线上的圆光效果
          ctx.beginPath();
          ctx.moveTo((w / 11) * 2, h / 3);
          ctx.arc((w / 11) * 2, h / 3, 5, 0, Math.PI * 2);
          ctx.fill();
          ctx.restore();
          ctx.save();
          // 绘制第二条线
          ctx.beginPath();
          var grd = ctx.createLinearGradient(
            (w / 11) * 3.3,
            h / 2,
            (w / 3) * 1.1,
            (h / 6) * 5
          );
          grd.addColorStop(0, "#e08d03");
          grd.addColorStop(1, "#2e6a5c");
          ctx.strokeStyle = grd;
          ctx.moveTo((w / 3) * 1.1, (h / 6) * 5);
          ctx.quadraticCurveTo((w / 5) * 1.5, (h / 6) * 4.2, (w / 11) * 3.3, h / 2);
          ctx.stroke();
          // 绘制第二条曲线上的圆光效果
          ctx.beginPath();
          ctx.moveTo((w / 11) * 3.3, h / 2);
          ctx.arc((w / 11) * 3.3, h / 2, 5, 0, Math.PI * 2);
          ctx.fill();
          ctx.restore();
          ctx.save();
          // 绘制第三条线
          ctx.beginPath();
          var grd = ctx.createLinearGradient(
            (w / 3) * 1.4,
            h / 5,
            (w / 5) * 2,
            h / 2
          );
          grd.addColorStop(0, "#e08d03");
          grd.addColorStop(1, "#2e6a5c");
          ctx.strokeStyle = grd;
          ctx.moveTo((w / 5) * 2, h / 2);
          ctx.quadraticCurveTo((w / 3) * 1.2, (h / 4) * 1.4, (w / 3) * 1.4, h / 5);
          ctx.stroke();
          // 绘制第三条曲线上的圆光效果
          ctx.beginPath();
          ctx.moveTo((w / 3) * 1.4, h / 5);
          ctx.arc((w / 3) * 1.4, h / 5, 5, 0, Math.PI * 2);
          ctx.fill();
          ctx.restore();
          ctx.save();
          // 绘制第四条线
          ctx.beginPath();
          var grd = ctx.createLinearGradient(
            (w / 5) * 3.1,
            (h / 3) * 1.2,
            (w / 5) * 3.2,
            (h / 2) * 1.5
          );
          grd.addColorStop(0, "#e08d03");
          grd.addColorStop(1, "#2e6a5c");
          ctx.strokeStyle = grd;
          ctx.moveTo((w / 5) * 3.2, (h / 2) * 1.5);
          ctx.quadraticCurveTo(
            (w / 5) * 3.35,
            (h / 2) * 1.2,
            (w / 5) * 3.1,
            (h / 3) * 1.2
          );
          ctx.stroke();
          // 绘制第四条曲线上的圆光效果
          ctx.beginPath();
          ctx.moveTo((w / 5) * 3.1, (h / 3) * 1.2);
          ctx.arc((w / 5) * 3.1, (h / 3) * 1.2, 5, 0, Math.PI * 2);
          ctx.fill();
          ctx.restore();
          ctx.save();
          // 绘制第五条线
          ctx.beginPath();
          var grd = ctx.createLinearGradient(
            (w / 5) * 3.3,
            h / 4,
            (w / 5) * 3.2,
            (h / 2) * 1.9
          );
          grd.addColorStop(0, "#e08d03");
          grd.addColorStop(1, "#2e6a5c");
          ctx.strokeStyle = grd;
          ctx.moveTo((w / 5) * 3.03, (h / 2) * 1.9);
          ctx.quadraticCurveTo((w / 5) * 3.8, (h / 2) * 1.2, (w / 5) * 3.3, h / 4);
          ctx.stroke();
          // 绘制第五条曲线上的圆光效果
          ctx.beginPath();
          ctx.moveTo((w / 5) * 3.3, h / 4);
          ctx.arc((w / 5) * 3.3, h / 4, 5, 0, Math.PI * 2);
          ctx.fill();
          ctx.restore();
          ctx.save();
          // 绘制第六条线
          ctx.beginPath();
          var grd = ctx.createLinearGradient(
            (w / 5) * 3.8,
            (h / 2) * 1.2,
            (w / 5) * 2.9,
            h
          );
          grd.addColorStop(0, "#e08d03");
          grd.addColorStop(1, "#2e6a5c");
          ctx.strokeStyle = grd;
          ctx.moveTo((w / 5) * 2.9, h);
          ctx.quadraticCurveTo(
            (w / 5) * 3.7,
            (h / 2) * 1.6,
            (w / 5) * 3.8,
            (h / 2) * 1.2
          );
          ctx.stroke();
          // 绘制第六条曲线上的圆光效果
          ctx.beginPath();
          ctx.moveTo((w / 5) * 3.8, (h / 2) * 1.2);
          ctx.arc((w / 5) * 3.8, (h / 2) * 1.2, 5, 0, Math.PI * 2);
          ctx.fill();
        }
        dashed();
    })

</script>
    
<template>
    <el-card>
        <div    class="resource_box">
            <!-- 头部模块 -->
            <header>
              <h1><span>资源使用情况</span></h1>
              <p><span>看板</span></p>
            </header>
        
            <el-row  class="main"  type="flex">
              <!-- top5 -->
              <el-col class="top5"  :span="6">
                <div class="top5-title">
                  <span>资源使用情况TOP5</span>
                </div>
                <div class="top5-content">
                  <ul>
                    <li   v-for="(item,index) in resourceTop5"  :key="index" 
                      @mouseenter="activeindex=index"
                      :class="{active: index === activeindex}"
                    >
                      <div class="cicle"></div>
                      <div class="li-content">
                        <span>{{item.brand}}</span>
                        <span>{{item.amount}}</span>
                        <span>{{item.rate}}%</span>
                     
                        <span v-if="item.isDown"><img src="./images/up.png" alt="" /></span>
                        <span  v-else><img src="./images/down.png" alt="" /></span>
                      </div>
                    </li>
                  
                  </ul>
                </div>
                <!-- <div class="top5-title">
                  <span>大类销售分析</span>
                </div> -->
              </el-col>
              <!-- 销售总额 -->
              <el-col class="total" :span="12">
                <div class="data1">
                  <span>年资源使用情况</span>
                  <p>5684710411</p>
                </div>
                <div class="data2">
                  <span>月资源使用情况</span>
                  <p>1457104</p>
                </div>
                <div class="data3">
                  <span>周资源使用情况</span>
                  <p>564710</p>
                </div>
                <div class="data4">
                  <span>日资源使用情况</span>
                  <p>14504</p>
                </div>
                <canvas class="rain"></canvas>
                <canvas class="dashed"></canvas>
                <div class="sphere">
                  <div class="sphere-bg"></div>
                  <div class="sum">
                    <span>总资源使用情况</span>
                    <p>568971401</p>
                  </div>
                </div>
                <div class="cicle3"></div>
                <div class="cicle4"></div>
                <div class="cicle5"></div>
                <div class="cicle6"></div>
                <div class="cicle7"></div>
                <div class="cicle8">
                  <span>89%</span>
                  <p>同比</p>
                </div>
                <div class="cicle9">
                  <span>89%</span>
                  <p>完成率</p>
                </div>
                <div class="cicle10">
                  <span>89%</span>
                  <p>售罄率</p>
                </div>
                <div class="cicle11">
                  <span>89%</span>
                  <p>折扣率</p>
                </div>
              </el-col>
        
        
           <el-col class="top5"      :span="6">
                <div class="top5-title">
                  <span>资源使用情况TOP5</span>
                </div>
                <div class="top5-content  top5-content1">
                  <ul>
                    <li   v-for="(item,index) in resourceTop5"  :key="index" 
                      @mouseenter="activeindex=index"
                      :class="{active: index === activeindex}"
                    >
                      <div class="cicle"></div>
                      <div class="li-content">
                        <span>{{item.brand}}</span>
                        <span>{{item.amount}}</span>
                        <span>{{item.rate}}%</span>
                     
                        <span v-if="item.isDown"><img src="./images/up.png" alt="" /></span>
                        <span  v-else><img src="./images/down.png" alt="" /></span>
                      </div>
                    </li>
                  
                  </ul>
                </div>
        
              </el-col>
        
        
            </el-row>
        
        
          </div>
    </el-card>
  </template>
  

<style  scoped  lang='scss'>
@import url('./css/style.css');

.top5-content1 {
  padding-left: 76px;
}

</style>